<template>
    <div class="add_new">
        <el-drawer v-model="drawer" direction="rtl" :before-close="handleClose">
            <template #header>
                <h4>新增用户</h4>
            </template>
            <template #default>
                <el-form ref="formRefs" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="form.phone" />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" />
                    </el-form-item>
                    <el-form-item label="角色" prop="email">
                        <el-select v-model="form.role">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload class="avatar-uploader" :action="uploadUrl" name="files" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img v-if="form.image" :src="base + form.image" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleClose">关闭</el-button>
                        <el-button type="primary" @click="confirmClick">确定</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-drawer>
    </div>
</template>


<script setup lang='ts'>
import { ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { registApi, editUserApi, } from '@/service/api';
import { base, uploadUrl } from '@/service/config';

const props = defineProps({
    rowData: {
        type: Object,
        default: () => { }
    }
});
const drawer = ref(false);
const isModify = ref(false); //是否修改
const formRefs = ref<FormInstance>();
const options = [
    { value: 0, label: '超级管理员' },
    { value: 1, label: '管理员' },
    { value: 2, label: '普通用户' },
]
const form = reactive({
    username: '',
    phone: '',
    email: '',
    image: '',
    role: 0,
    password: '123456',

});
const emit = defineEmits(['addSuccess']);
const rules = reactive<FormRules>({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
});

function confirmClick() {
    formRefs.value?.validate((vali) => {
        if (vali) {
            addStoreFn();
        } else {
            console.log('验证未通过');
        }
    });
}
const addStoreFn = async () => {
    let res: Res;
    if (!isModify.value) {
        res = await registApi({ ...form });
    } else {
        res = await editUserApi({ id: props.rowData._id, ...form });
    }
    if (res.code !== 201) return ElMessage.error(res.errors.msg);
    ElMessage.success(res.msg);
    emit('addSuccess');
    handleClose();
};
const handleAvatarSuccess = (res) => {
    console.log(res);
    if (res.error) return ElMessage.error('头像上传失败');
    ElMessage.success('头像上传成功');
    form.image = res.data.url;
};

const resetForm = () => {
    form.phone = '';
    form.email = '';
    form.username = '';
    form.password = '123456';
    form.image = '';
    form.role = 0;
    isModify.value = false;
};

const addStore = () => {
    drawer.value = true;
};
const handleClose = () => {
    drawer.value = false;
    resetForm();
};

defineExpose({ form, addStore, isModify });
</script>


<style scoped lang='less'>
.add_new {}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>